<template>
  <div class="dashboard">
    <h1>欢迎来到驾驶舱</h1>
    <p>这是应用的主界面。</p>
    <div>
      <h2>Access Token</h2>
      <p>来自 Vuex: {{ vuexAccessToken }}</p>
      <p>来自 LocalStorage: {{ localStorageAccessToken }}</p>
    </div>
    <div>
      <h2>User</h2>
      <p>来自 Vuex: {{ username }}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapState({
      vuexAccessToken: state => state.access_token, // 从 Vuex 获取 AccessToken
//       App.vue 中通过 mapState 从 Vuex 中获取 username，并在菜单栏显示用户信息。
// Dashboard.vue 中也通过 mapState 获取 username，确保在登录后能够动态显示用户信息。
// Vuex store 中保存了 username，并通过 mutations 更新它，在登录成功时保存到 Vuex 和 localStorage。
// 通过这种方式，当你在 App.vue 或 Dashboard.vue 中更新 username 后，它将自动反映在页面上，确保 username 在不同组件间能够同步更新。
      username: state => state.username // 从 Vuex 获取用户名
    }),
    localStorageAccessToken () {
      // 从 LocalStorage 获取 AccessToken
      return localStorage.getItem('access_token') || '未找到 Access Token'
    }
  }
}
</script>

<style scoped>
.dashboard {
  text-align: center;
}

h2 {
  margin-top: 20px;
}

p {
  margin: 5px 0;
}
</style>
